<template>
  <div class="detail" style="overflow: hidden;background: #fff">
    <!--<div style="width: 4vw;height:4vw;float: right;margin-top: 3.3vw;">
      <img src="../../assets/img/glare.png" alt="" style="width:100%;height: 100%;position: relative;right:4vw;">
    </div>-->
    <div class="detail-tab">
      <div id="header" style="position:fixed;z-index: 1;">
        <div style="margin: 0px auto;width: 55vw;" class="topbar">
          <a @click="produc" ><span>商品</span></a>
          <a style="margin-left: 13vw;margin-right: 13.3vw" @click="detai"><span>详情</span></a>
          <a @click="good"><span>推荐</span></a>
        </div>
      </div>
      <div style="width:100vw;height:100vh;" class="content1">
        <products :goodsType="goodsType" :goodsInfo="goodsInfo" :swipeImg="swipeImg"
                  :promise="promise" :types="type" :time="time" :isNew="isNew"
                  id="product" :limit="limit" :group="group" :limitType="limitType"
                  :buyLimit="buyLimit" :presale="presale" :activity="activity" :respon="respon" :textContent="textContent"></products>
        <div class="detail-rule-wrap"></div>
        <div class="choose" @click="choose"  id="detail" style="position:relative;z-index: 1">
          <p>选择 <span>&nbsp;尺码&nbsp;</span> 和 <span>&nbsp;颜色&nbsp;</span></p>
        </div>
        <!--<chooseDetail :respon="respon" :storeNums="storeNums" :groupList="groupList" :spec="spec"></chooseDetail>-->
        <!--普通商品规格-->
        <div class="chooseDetail" v-show="show">
          <div class="contents ">
            <img :src="respon.image" alt="" class="img">

            <div class="price">
              <p style="color: #FF5230;font-size: 15px;" v-if="price == 1">￥{{respon.finnal_price}}</p>
              <p style="color: #FF5230;font-size: 15px;" v-else>￥{{finalPrice}}</p>
              <p v-if="price == 1" style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{respon.all_store_nums}}件</p>
              <p v-else style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{storeNums}}件</p>
            </div>
            <div class="close" @click="choose">
              <img src="/static/img/close.png" alt="" >
            </div>
            <div style="margin-top: 17vw;position: absolute;left: -1vw;height: 150px;overflow:scroll;width: 100%">
              <div v-for="(option, index) in spec" :key="index" style="padding-left: 4vw;height: auto;">
                <p style="padding-left: 4vw;font-size: 13px;color: #999;margin-bottom: 2vw;margin-top: 3vw">{{option.name}}:</p>
                <div class="rows">
                  <radio-group>
                    <label class="labe" :class="labelNum[index] ==''+index+ind?'active':''" v-for="(item,ind) in option.value" :key="ind"  @click="select(index,ind)"  :for="'label_'+index+ind" style="color: #333;font-size: 14px;">
                      <radio :name="index" :id="'label_'+ind" value="" style="transform: scale(0);width: 1rpx;"></radio>{{item.name}}
                    </label>
                  </radio-group>
                </div>
              </div>
            </div>
            <div style="position:absolute;width: 85vw;left: 7vw;top: 58vw;">
              <p style="float: left;font-size: 13px;color: #333;">数量</p>
              <van-stepper v-model="chooseNum" disable-input @change="stepChange"  style="float: right;"/>
            </div>
            <van-goods-action class="iphonex">
              <van-goods-action-button type="warning" text="加入购物车" style="background: #000000;" @click="joinChart"/>
              <!--<van-goods-action-big-btn text="立即购买" primary  url="#" to="/order"/>-->
              <van-goods-action-button text="立即购买" primary @click="buyGoods"/>
            </van-goods-action>
          </div>
        </div>
        <!--团购规格-->
        <div class="chooseDetail " v-show="groupShow">
          <div class="contents groupContents">
            <img :src="respon.image" alt="" class="img">
            <div class="price">
              <p style="color: #FF5230;font-size: 15px;" v-if="price == 1">￥{{respon.finnal_price}}</p>
              <p style="color: #FF5230;font-size: 15px;" v-else>￥{{finalPrice}}</p>
              <p v-if="price == 1" style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{respon.all_store_nums}}件</p>
              <p v-else style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{storeNums}}件</p>
            </div>
            <div class="close" @click="groupchoose">
              <img src="/static/img/close.png" alt="" >
            </div>
            <div style="margin-top: 17vw;position: absolute;left: -1vw;height: 130px;overflow:scroll;width: 100%">
              <div v-for="(option, index) in spec" :key="index"  style="padding-left: 4vw;height: auto;">
                <p style="padding-left: 4vw;font-size: 13px;color: #999;margin-bottom: 2vw;margin-top: 3vw">{{option.name}}:</p>
                <div class="rows" style="display: inline-block;margin-left: 1vw" >
                  <radio-group>
                    <label class="labe" :class="labelNum[index] ==''+index+ind?'active':''" :for="'labelGroup_'+index+ind" v-for="(item, ind) in option.value" :key="ind" @click="select(index,ind)" style="color: #333;font-size: 14px;">
                      <radio :name="index" :id="'labelGroup_'+index+ind" value="" style="transform: scale(0);width: 1px;"></radio>
                        {{item.name}}
                    </label>
                  </radio-group>

                </div>
              </div>
            </div>
            <div style="position:absolute;width: 85vw;left: 7vw;top: 65vw;">
              <p style="float: left;font-size: 13px;color: #333;">数量</p>
              <van-stepper v-model="chooseNum" @change="stepChange" disabled style="float: right;"/>
            </div>
            <van-goods-action class="iphonex">
              <van-goods-action-button type="warning" text="独自购买"  @click="buyGoods"/>
              <p class="linePrice" @click="buyGoods">￥{{goodsInfo.line_price}}</p>
              <van-goods-action-button text="我要开团" @click="buyGroupGoods"/>
              <p class="salePrece" @click="buyGroupGoods">￥{{goodsInfo.sale_price}}</p>
            </van-goods-action>
          </div>
        </div>
        <!--限时限量商品规格-->
        <div class="chooseDetail" v-show="limitshow">
          <div class="contents ">
            <img :src="respon.image" alt="" class="img">
            <div class="price">
              <p style="color: #FF5230;font-size: 15px;" v-if="price == 1">￥{{respon.finnal_price}}</p>
              <p style="color: #FF5230;font-size: 15px;" v-else>￥{{finalPrice}}</p>
              <p v-if="price == 1" style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{respon.all_store_nums}}件</p>
              <p v-else style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{storeNums}}件</p>
            </div>
            <div class="close" @click="Limitchoose">
              <img src="/static/img/close.png" alt="" >
            </div>
            <div style="margin-top: 17vw;position: absolute;left: -1vw;height: 130px;overflow:scroll;width: 100%">
              <div v-for="(option, index) in spec" :key="index" style="padding-left: 4vw;height: auto;">
                <p style="padding-left: 4vw;font-size: 13px;color: #999;margin-bottom: 2vw;margin-top: 3vw">{{option.name}}:</p>
                <div class="rows">
                  <radio-group>
                    <label class="labe" :class="labelNum[index] ==''+index+ind?'active':''" :for="'labelLimit_'+index+ind" v-for="(item,ind) in option.value" :key="ind" @click="select(index,ind)" style="color: #333;font-size: 14px;">
                      <radio :name="index" :id="'labelLimit_'+index+ind" value=""  style="transform: scale(0);width: 1px;"></radio>
                      {{item.name}}
                    </label>
                  </radio-group>
                </div>
              </div>
            </div>
            <div style="position:absolute;width: 85vw;left: 7vw;top: 59vw;">
              <p style="float: left;font-size: 13px;color: #333;">数量</p>
              <van-stepper v-model="chooseNum" @change="stepChange" v-if="limitType == 1" style="float: right;"/>
              <van-stepper v-model="chooseNum" @change="stepChange" v-else disabled style="float: right;"/>
            </div>
            <van-goods-action class="iphonex">
              <van-goods-action-button text="立即购买" primary @click="buyLimitGoods"/>
            </van-goods-action>
          </div>
        </div>
        <!--参团规格-->
        <div class="chooseDetail" v-show="joinGroupshow">
          <div class="contents ">
            <img :src="respon.image" alt="" class="img">
            <div class="price">
              <p style="color: #FF5230;font-size: 15px;" v-if="price == 1">￥{{respon.finnal_price}}</p>
              <p style="color: #FF5230;font-size: 15px;" v-else>￥{{finalPrice}}</p>
              <p v-if="price == 1" style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{respon.all_store_nums}}件</p>
              <p v-else style="color: #666666;font-size: 12px;text-indent: .5vw">库存：{{storeNums}}件</p>
            </div>
            <div class="close" @click="joinGroup">
              <img src="/static/img/close.png" alt="" >
            </div>
            <div style="margin-top: 17vw;position: absolute;left: -1vw;height: 130px;overflow:scroll;width: 100%">
              <div v-for="(option, index) in spec" :key="index" style="padding-left: 4vw;height: auto;">
                <p style="padding-left: 4vw;font-size: 13px;color: #999;margin-bottom: 2vw;margin-top: 3vw">{{option.name}}:</p>
                <div class="rows" >
                  <radio-group>
                    <label class="labe" :class="labelNum[index] ==''+index+ind?'active':''"  :for="'label_'+index+ind+1" v-for="(item,ind) in option.value" :key="ind" @click="select(index,ind)" style="color: #333;font-size: 13px;">
                      <radio :name="index" :id="'label_'+index+ind+1" value="" style="transform: scale(0);width: 1px;"></radio>
                      {{item.name}}
                    </label>
                  </radio-group>
                </div>
              </div>
            </div>
            <div style="position:absolute;width: 85vw;left: 7vw;top: 59vw;">
              <p style="float: left;font-size: 13px;color: #333;">数量</p>
              <van-stepper :value="chooseNum"  @change="stepChange" disabled style="float: right;"/>
            </div>
            <van-goods-action class="iphonex">
              <van-goods-action-button text="立即参团" primary @click="buyGroupGoods"/>
            </van-goods-action>
          </div>
        </div>
        <!--<div style="width: 100vw;height: auto;background: #fff;border-bottom: 4vw solid #f5f5f5"  v-if="group.group_number !== 0">
          <div class="containeres" >
            <div class="header">
              <div style="display: inline-block;" v-if="group.is_join_group == 0">
                <img src="/static/img/ic_team.png" alt="" style="width:6vw;height: 4.37vw;">这些小伙伴已经开团
              </div>
              <div style="display: inline-block;" v-else>
                我加入的团
              </div>
              <span @click="checkMore" style="float: right;" v-if="group.is_has == 1">查看更多
                   <img src="/static/img/rectang.png" alt=""></span>
              <div v-show="popup" position="bottom" class="popup">
                <div style="width: 92vw;margin: 0px auto;">
                  <div class="group"  v-for="(groupVs,groupis) in groupList" :key="groupis">
                    &lt;!&ndash;<p class="open" v-html="groupVs.commander_name">&ndash;&gt;
                      <wxParse :content="groupVs.commander_name"/>
                      &lt;!&ndash;由<span style="color: #ff9797;" class="span">{{groupV.commander_name}}</span>开团，还差
                      <span class="span" style="color: #ff4c50;">{{groupV.num}}</span>人成团&ndash;&gt;
                    &lt;!&ndash;</p>&ndash;&gt;
                    <div  class="footer" >
                      <div class="headIcoBox" align="center">
                        <div  v-for="(icoVs,icoIs) in groupVs.join_user" style="overflow: hidden;" :key="icoIs">
                          <img :src="icoVs.head_ico" alt="" style="width: 100%;height: 100%;margin-left: -1vw">
                        </div>
                      </div>
                      <button @click="joinGroup">立即参团</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="group" id="alertgroup" v-for="(groupV,groupi) in group.group_join_member" :key="groupi">
             &lt;!&ndash; <p class="open"  v-html="groupV.commander_name">

              </p>&ndash;&gt;
              <wxParse :content="groupV.commander_name"/>
              <div  class="footer" >
                <div class="headIcoBox" align="center" >
                  <div style="overflow: hidden" v-for="(icoV,icoI) in groupV.join_user" :key="icoI">
                    <img :src="icoV.head_ico" alt="">
                  </div>
                </div>
                <button v-if="group.is_join_group == 0"  @click="joinGroup">立即参团</button>
                <button v-else>邀请好友</button>
              </div>
            </div>
          </div>
        </div>-->
        <div>
          <div class="width:100vw;height:6vw;background:#f5f5f5"></div>
          <div class="text">
            <img src="/static/img/line.png" alt="">
            <p>商品詳情</p>
            <img src="/static/img/line.png" alt="" style="transform: rotate(180deg)">
          </div>

          <!--<div v-html="goodsInfo.content"  style="width: 100vw;height: auto;background: #fff;padding: 13px 8px 0 8px"></div>-->
        </div>
        <div style="width: 100vw;height:6vw;background: #f5f5f5;" id="goods"></div>
        <!--<selectedAds></selectedAds>-->
      </div>
      <div style="width: 100vw;height: auto;background: #fff;padding: 13px 8px 0 8px;padding-bottom: 10vw;">
        <wxParse :content="goodsInfo.content"></wxParse>
      </div>
      <goodsBottom :goodsType="type" :goodsInfo="goodsInfo" :goodsId="goods_ids" @pageTo="pageTo" :storeNums="storeNums" :is_join="is_join_group"
       @display="showSku" @groupdisplay="groupshow" @limitDisplay="limitShow" :cartNumber="cartNumber" :activity_id="activity_id" :is_notice="is_notice">
      </goodsBottom>
    </div>
  </div>
</template>
<script>
  import wxParse from 'mpvue-wxparse'
  import products from '@/components/detail/products'
  import goodsBottom from '@/components/detail/goodsBottom'
  /* //import selectedAds from '@/components/detail/selectedAds'
  import openGroup from '@/components/detail/openGroup' */
  import request from '@/actions/request.js'
  export default {
    name: 'Detail',
    components: {
      wxParse,
      products,
      goodsBottom,
      /*//selectedAds,
      openGroup, */
    },
    data () {
      return {
        labelNum:[],
        groupList: [],
        joinGroupshow: false,
        limitshow: false,
        storeNums: '',
        finalPrice: '',
        price: 1,
        needsGoods: {},
        groupShow: false,
        chooseNum: 1,
        sku: [],
        show: false,
        groupStatus: 1,
        skuid: ['', ''],
        idInt: '',
        popup: false,
        respon: [],
        is_notice: '',
        types: '',
        group_ids: '',
        join_ids: '',
        limit_ids: '',
        goods_ids: '',
        limitType: '',
        activity_id: '',
        cart_id: 0,
        time: '',
        isNew: '',
        promise: [],
        activity: [],
        swipeImg: [],
        coupons: [],
        goodsInfo: [],
        spec: [],
        evalCode: 1,
        goodsType: 1,
        showBase: false,
        active: 0,
        limit: [],
        group: [],
        buyLimit: '',
        presale: '',
        specId: '',
        mesChart: '',
        article_id: 0,
        group_type: 1,
        normalGoodsType: 0,
        groupGoodsType: 1,
        is_join_group: 0,
        type: '',
        activitys_id: '',
        textContent:'数据加载中...',
        cartNumber:''
      }
  },
    onLoad () {
      this.joinGroupshow = false;
      this.limitshow=false;
      this.groupShow=false;
      this.popup=false;
      this.showBase=false;
      this.show=false;
      this.specId='';
    },
    onShow(){
        this.textContent = '数据加载中...',
        this.labelNum=[],
        this.groupList= [],
        this.joinGroupshow= false,
        this.limitshow= false,
        this.storeNums= '',
        this.finalPrice= '',
        this.price= 1,
        this.needsGoods= {},
        this.groupShow= false,
        this.chooseNum= 1,
        this.sku=[],
        this.show= false,
        this.groupStatus= 1,
        this.skuid= ['', ''],
        this.idInt= '',
        this.popup= false,
        this.respon= [],
        this.is_notice= '',
        this.types= '',
        this.group_ids= '',
        this.join_ids= '',
        this.limit_ids='',
        this.goods_ids= '',
        this.limitType= '',
        this.activity_id= '',
        this.cart_id= 0,
        this.time= '',
        this.isNew= '',
        this.promise= [],
        this.activity= [],
        this.swipeImg= [],
        this.coupons= [],
        this.goodsInfo= [],
        this.spec= [],
        this.evalCode= 1,
        this.goodsType= 1,
        this.showBase= false,
        this.active=0,
        this.limit= [],
        this.group= [],
        this.buyLimit= '',
        this.presale= '',
        this.specId= '',
        this.mesChart= '',
        this.article_id= 0,
        this.group_type= 1,
        this.normalGoodsType= 0,
        this.groupGoodsType= 1,
        this.is_join_group= 0,
        this.type= '',
        this.activitys_id= '';
        this.cartNumber = '';

    },
    watch: {
    },
    mounted () {
      this.types = this.$root.$mp.query.type
      this.group_ids = this.$root.$mp.query.group_id
      this.join_ids = this.$root.$mp.query.join_id
      this.limit_ids = this.$root.$mp.query.limit_id
      this.goods_ids = this.$root.$mp.query.goods_id
      /*this.limitType = this.$root.$mp.query.limitType*/
      this.activity_id = this.$root.$mp.query.activity_id
      request.getProductsDetail('api/goods/goodsInfo', 'post', {
        type: this.types,
        group_id: this.group_ids,
        join_id: this.join_ids,
        limit_id: this.limit_ids,
        goods_id: this.goods_ids,
        activity_id: this.activity_id}, {}, false, this)
      request.seeMore('api/goods/groupbuying','post',{
        goods_id:this.goods_ids,
        page:1,
        type:2,
        limit_id:0,
        group_id:this.group_ids},{},false, this)
  },
    updated () {
    },
    methods: {
      stepChange(e){
        this.chooseNum=e.mp.detail;
        if (this.chooseNum>this.storeNums) {
          this.chooseNum = this.storeNums
        };
      },
      pageTo(){
       /* let url = '../shopChart/main'*/
        wx.switchTab({
          url:'../shopChart/main'
        })
      },
      limitShow () {
        this.limitshow = !this.limitshow
      },
      buyLimitGoods () {
        var b = false
        this.sku.forEach((v1, i1) => {
          var a = true
          this.skuid.forEach((v, i) => {
            if (v1.spec_array[i].value != v) {
              a = false
              this.price = 0
            }
          })
          if (a) {
            this.specId = v1.spec_id
            b = true
          }
        })
        if (b) {
            request.buyGoods("api/order/beforeOrder","post",{
              type:this.types,
              goods_id:this.goods_id,
              spec_id:this.specId,
              goods_number:this.chooseNum,
              article_id:this.article_id,
              limit_id:this.limit_id,
              group_type:this.normalGoodsType,
              group_id:this.group_id,
              join_id:this.join_id,
              cart_id:this.cart_id,
              activity_id:this.activity_id,
            },{},true,this)
           /* request.buyGoods(this,this.chooseNum,this.specId,this.normalGoodsType);*/
        } else {
          wx.showToast({
            title: '请选择完整属性',
            icon: 'none',
            duration: 2000
          })
        }
      },
      buyGroupGoods () {
        var b = false
        this.sku.forEach((v1, i1) => {
          var a = true
          this.skuid.forEach((v, i) => {
            if (v1.spec_array[i].value != v) {
              a = false
              this.price == 0
            }
          })
          if (a) {
            this.specId = v1.spec_id
            b = true
          }
        })
        if (b) {
          // request.buyGoods(this,this.chooseNum,this.specId,this.groupGoodsType);
        } else {
          wx.showToast({
            title: '请选择完整属性',
            icon: 'none',
            duration: 2000
          })
        }
      },
      buyGoods () {
        var b = false
        this.sku.forEach((v1, i1) => {
          var a = true
          this.skuid.forEach((v, i) => {
            if (v1.spec_array[i].value != v) {
              a = false
              this.price = 0
            }
          })
          if (a) {
            this.specId = v1.spec_id;
            b = true;
          }
        })
        if (b) {
          request.buyGoods('api/order/beforeOrder','post',{
            type:this.type,
            goods_id:this.goods_ids,
            spec_id:this.specId,
            goods_number:this.chooseNum,
            article_id:this.article_id,
            limit_id:this.limit_ids,
            group_type:this.normalGoodsType,
            group_id:this.group_ids,
            join_id:this.join_ids,
            cart_id:this.cart_id,
            activity_id:this.activity_id,
          },{},true,this)

        } else {
          wx.showToast({
            title: '请选择完整属性',
            icon: 'none',
            duration: 2000
          })
        }
        /* if (a = false){
        }else{

        } */
      },
      joinChart () {
        var b = false
        this.sku.forEach((v1, i1) => {
          var a = true
          this.skuid.forEach((v, i) => {
            if (v1.spec_array[i].value != v) {
              a = false
              this.price = 0
            }
          })
          if (a) {
            this.specId = v1.spec_id
            b = true
          }
        })
        if (b) {
           request.joinChart('api/goods/addCart','post',{
             type:this.types,
             activity_id:this.activity_id,
             goods_id:this.goods_ids,
             goods_num:this.chooseNum,
             spec_id:this.specId,
           },{},true,this);
           if ( this.cartNumber === "99+"){

           } else{
             let num = this.cartNumber +  this.chooseNum;
             if (num>99) {
               this.cartNumber = "99+";
             }else{
               this.cartNumber = num;
             };

           };

          this.show = !this.show
        } else {
          wx.showToast({
            title:'请选择完整属性',
            icon:'none',
            duration:'2000'
          })
        }
      },
      select (index, ind) {
        this.labelNum[index] = ''+index+ind;
        var itemId = this.spec[index].value[ind].name
        this.skuid.splice(index, 1, itemId)
        this.idInt = this.skuid.join(',')
        var b = false
        this.sku.forEach((v1, i1) => {
          var a = true
          this.skuid.forEach((v, i) => {
            if (v1.spec_array[i].value != v) {
              a = false
              this.price = 0
            }
          })
          if (a) {
            this.price = 0
            this.finalPrice = v1.finnal_price
            this.storeNums = v1.store_nums
          }
        })
      },
      showSku () {
        this.show = true
      },
      groupshow () {
        this.groupShow = true
      },
      groupchoose () {
        this.groupShow = !this.groupShow
      },
      joinGroup () {
        this.joinGroupshow = !this.joinGroupshow
        this.popup = false
      },
      checkMore () {
        this.popup = !this.popup
      },
      choose () {
        if (this.type == 1) {
          this.show = !this.show
        } else if (this.type == 2) {
          this.groupShow = !this.groupShow
        } else if (this.type == 3) {
          this.limitshow = !this.limitshow
        } else if (this.type == 6) {
          this.show = !this.show
        }
      },
      Limitchoose () {
        this.limitshow = !this.limitshow
      }
      // 页面跳转到相应的锚点
      /* produc(){
        document.querySelector("#product").scrollIntoView(true);
      },
      detai(){
        document.querySelector("#detail").scrollIntoView(true);
      },
      good(){
        document.querySelector("#goods").scrollIntoView(true);
      } */
    }
  }
</script>

<style scoped lang="scss">
  label.active{
    border: 1px solid #ff4c50;
    color: #ffffff !important;
    background:#ff4c50;
    border-radius: 6px;
  }
 /* radio:active .labe{
    border: 1px solid #ff4c50;
    color: #ff4c50 !important;
    border-radius: 6px;
  }*/
  .labe{
    color:#333;
    font-size:14px;
    line-height:20px;
    min-width:10vw;
    border:1px solid #999;
    border-radius:2vw;
    display:inline-block;
    height:20px;
    text-align:center;
    margin-right:2vw;
  }
  @import url("~mpvue-wxparse/src/wxParse.css");
  .containeres .group .open {
    img{
      width: 4vw;
    }
  }
  @media screen and (min-width: 320px) and (max-width: 350px){
    .text{
      width: 94% !important;
    }
  }

  .text{
    width:94%;
    height:7vw;
    margin: 0px auto;
    img{
      float:left;
      margin-top: 2.7vw;
      width:37%;
      height: .5vw;
    }
    p{
      float: left;
      font-size: 16px;
      color: #ff5230;
      margin-left:2vw;
      margin-right:2vw;
    };
  }
  .groupContents{
    .linePrice{
      right:67.5vw;
      top: 1vw;
      position: absolute;
      color: #fff;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
    .salePrece{
      right:17.5vw;
      top: 1vw;
      position: absolute;
      color: #fff;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }
  .containeres{
    width: 92vw;
    height: auto;
    margin: 0px auto;
    padding-top: 4.3vw;
    margin-bottom: 5vw;
    .footer{
      width: 92%;
      height: 16.34vw;
      margin:0px auto;
      button{
        width: 21vw;
        height: 8.3vw;
        background:linear-gradient(-90deg,rgba(255,53,53,1) 0%,rgba(255,66,122,1) 100%);
        float: right;
        margin-top: 4vw;
        font-size: 15px;
        color:#fff;
        border-radius: 1vw;
      }
      .headIcoBox{
        width: 59.67vw;
        height: 10.67vw;
        display: inline-block;
        margin-top: 3vw;
        overflow: scroll;
        div{
          width: 10.67vw;
          height: 10.67vw;
          border: 1px dashed red;
          display: inline-block;
          margin: 0 1.1vw 0 1.1vw;
          border-radius: 6vw;
        }
      }
    }
    .group{
      width:100%;
      height:26.67vw;
      background:rgba(255,255,255,1);
      border:2px solid rgba(255,214,214,1);
      box-shadow:0px 6px 26px 0px rgba(255,153,173,0.2);
      border-radius:4vw;
      margin-top: 4vw;
      .open{
        font-size: 14px;
        color: #666;
        height: 9.34vw;
        line-height: 9.34vw;
        text-indent: 4vw;
        border-bottom: 1px solid #FFE6E6;
      }
    }
    .header{
      text-indent: 1vw;
      font-size: 15px;
      color: #333;
      background: none;
      span{
        font-size: 13px;
        color: #666;
      }
      img{
        width: 3vw;
        height: 3.2vw;
      }
    }
  }
  @media screen and (min-width: 320px) and (max-width:370px){
    .topbar{
      width: 60vw !important;
    }

  }
  .popup{
    width: 100vw;
    height: 60vh;
    background: #fff;
    position: fixed;
    bottom: 0vw;
  }
  #YSF-BTN-HOLDER {
    display: block !important;
  }
  .van-tab span{
    font-size: 20px;
  }
  .van-tabs__wrap{
    width: 20vw;
  }
  .van-tabs--line .van-tabs__wrap{
    width: 20vw !important;
  }
  .chooseDetail{
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,.4);
    position: fixed;
    bottom: 0px;
    z-index: 1000;
    .contents{
      width: 100vw;
      height: 50vh;
      position: absolute;
      bottom: 0px;
      background: #fff;
      border-top: 1px solid #f5f5f5;
      .price{
        position: absolute;
        left: 33vw;
        top: 4vw;
        text-align: left;
      }
      .img{
        width: 25vw;
        height: 25vw;
        position: absolute;
        border: 1px solid #E71F19;
        border-radius: 5px;
        top: -10vw;
        left: 5vw;
      }
      input {
        /*display: none;*/
        position: relative;
        left: 21vw;
        width: .1vw;
      }
      radio+label {
        width: 16vw;
        height: 6.67vw;
        display: inline-block;
        background-color: #f5f5f5;
        color: #333;
        border: none;
        border-radius: 13px;
        text-align: center;
        font-size: 13px;
      }
      radio:checked+label {
        background-color: #ff4c50;
        color: #fff !important;
      }
      .rows {
        display: inline-block;
        margin-left: 4vw;
      }
      .close{
        font-size: 33px;
        position: absolute;
        top: 1vw;
        right: 3vw;
        width: 4vw;
        height: 4vw;
        img{
          width: 100%;
          height: 100%;
          border: none;
        }
      }
    }
  }
  .choose{
    font-size: 15px;
    color: #333;
    width: 100vw;
    height: 14vw;
    background: #fff;
    border-bottom: 3vw solid #f5f5f5;
    line-height: 12vw;
    padding-left: 4vw;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    span{
      color: #ff4c50;
    }
  }
  #header{box-shadow: none;
    background: #333;
    opacity: 0;}
  #header.active{
    opacity: 1;
    transition: opacity 1s;
    /* Firefox 4 */
    -moz-transition:opacity 1s;
    /* Safari and Chrome */
    -webkit-transition:opacity 1s;
    /* Opera */
    -o-transition:opacity 1s;
  }
  #header{
    width: 100vw;
    height: 10vw;
    line-height: 10vw;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    // background: rgba(255,255,255,0);
    span{
      color: #fff;
      text-align: center;
      font-size: 16px;
    }
  }
  .van-tab{
    background: none !important;
  }
  .detail-tab {
    /*width: 100%;
    height: 11.73vw;
    background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,0));*/
    .detail-tabs {
      margin: 0 auto;
      display: flex;

      .detail-share {
        width: 10%;
        display: flex;
        align-items: center;
        .iconfont {
          color: #fff;
        }
      }
    }
  }
  .evalute{
    font-size: 15px;
    color: #333;
    width: 92%;
    margin: 0px auto;
    background: #fff;
    height: 9vw;
    padding-top: 4vw;
  }
  .detail-rule-wrap {
    width: 100%;
    height: auto;
    margin-top: 10px;
    //margin-bottom: 10px;
    background: white;
    border-top: 10px solid #f5f5f5;
    .sku{
      width:100%;
      height:13.3vw;
      border-bottom:1px solid #f5f5f5;
      p{
        width:90%;
        margin:0px auto;
        font-size:15px;
        height:13.3vw;
        line-height:13.3vw;
      }
    }
    .detail-rule {
      width: 90%;
      height: 100%;
      margin: 0 auto;
      ul {
        width: 100%;
        height: 100%;
        li {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 15px;
          .iconfont {
            color: #666;
          }
          > div {
            display: flex;
            .detail-rule-gray {
              color: #666;
            }
            .detail-rule-lightblack {
              color: #333;
              > span  {
                color: #FF4C50;
              }
            }
          }
          .detail-rule-specifications > span {
            &:first-of-type {
              margin-right: 33px;
            }
          }
          .detail-rule-coupon > span {
            margin-right: 17px;
          }
        }
      }
    }
  }
  .checkComment{
    width:26.67vw;
    height:8vw;
    display: inline-block;
    border:1px solid #FF4C50;
    border-radius: 17px;
    color: #ff4c50;
    text-align: center;
    line-height:8vw;
    font-size:11px;
    margin:0px auto;
    position: relative;
    bottom:10vw;
    left:36.66vw;
  }
  @media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    .iphonex{
      padding-bottom:34px;
      background: #fff;
    }
  }
</style>

<style lang="scss">
  .groupContents{
    .van-goods-action-big-btn{
      line-height: 17vw;
    }
  }

</style>
